<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/JSP/Common/head.jsp"%>
<div class="nowPosition">你所在的位置是修改用户</div>
<div class="updateUser-div">
    <p style="padding-left: 8%;font-family: '楷体';color: red">${MESSAGE}</p>
    <form action="${pageContext.request.contextPath}/JSP/user.go" method="post" id="updateUserForm">
        <input type="hidden" name="method" value="updateUserSubmit">
        <input type="hidden" name="userId" value="${user.id }"/>
        <label>
            <span class="updateUser-span">用户账号</span>
            <input id="userCode" name="userCode" type="text" disabled="disabled" value="${user.userCode}" class="updateUser-input-text inshadow txtclick" />
        </label><br />
        <label>
            <span class="updateUser-span">用户姓名</span>
            <input id="userName" name="userName" type="text" value="${user.userName}" class="updateUser-input-text inshadow txtclick" placeholder="请输入姓名" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateUser-span">用户性别</span>
            <!--<input id="userSex" type="text" class="addUser-input-text inshadow txtclick" placeholder="性别" />-->
            <select id="userGender" name="userGender" class="updateUser-genderSelect inshadow txtclick">
                <option <c:if test='${user.gender == "女"}'>selected="selected"</c:if> value="女">女</option>
                <option <c:if test='${user.gender == "男"}'>selected="selected"</c:if> value="男">男</option>
            </select>
        </label><br />
        <label>
            <span class="updateUser-span">出生日期</span>
            <input id="userBirthday" name="userBirthday" type="text" value="${user.birthday}" class="updateUser-input-text inshadow txtclick" placeholder="请输入出生日期" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateUser-span">用户电话</span>
            <input id="userPhone" name="userPhone" type="text" value="${user.phone}" class="updateUser-input-text inshadow txtclick" placeholder="请输入电话号码" />
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <span class="updateUser-span">用户住址</span>
            <input id="userAddress" name="userAddress" type="text" value="${user.address}" class="updateUser-input-text inshadow txtclick" placeholder="请输入用户住址" />
            <span  style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <input type="hidden" value="${user.userRole}" id="userRoleId" />
            <span class="updateUser-span">用户职位</span>
            <select id="userRole" name="userRole" class="updateUser-genderSelect inshadow txtclick"></select>
            <span style="color: red;font-family: '楷体';"></span>
        </label><br />
        <label>
            <input id="updateUser" type="button" class="btnclick addUser-input-save inshadow-white" value="修改" />
        </label>
        <label>
            <input type="button" class="goback btnclick addUser-input-goback inshadow-white" value="返回" />
        </label>
    </form>
</div>
<%@ include file="/JSP/Common/foot.jsp"%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/JS/updateUser.js" ></script>--%>
<script type="text/javascript">
    var userCode;
    var userName;
    var	userGender;
    var userBirthday;
    var userPhone;
    var userAddress;
    var userRole;
    var updateUserForm;
    var updateUser;


    $(function () {
        userCode = $("#userCode");
        userName = $("#userName");
        userGender = $("#userGender");
        userBirthday = $("#userBirthday");
        userPhone = $("#userPhone");
        userAddress = $("#userAddress");
        userRole = $("#userRole");
        updateUserForm = $("#updateUserForm");
        updateUser = $("#updateUser");

        userName.attr("validateStatus", true);
        userBirthday.attr("validateStatus", true);
        userPhone.attr("validateStatus", true);
        userAddress.attr("validateStatus", true);
        userRole.attr("validateStatus", true);


        $.ajax({
            type:"GET",//请求类型
            url:getPath() + "/JSP/user.go",//请求的url
            data:{method:"getRoleList"},//请求参数
            dataType:"json",//ajax接口（请求url）返回的数据类型
            success:function(data){//data：返回数据（json对象）
                if(data != null){
                    var userRoleId = $("#userRoleId").val();
                    userRole.html("");
                    var options = "";
                    for(var i = 0; i < data.length; i++){
                        //alert(data[i].id);
                        //alert(data[i].roleName);
                        if(userRoleId != null && userRoleId != undefined && data[i].id == userRoleId ){
                            options += "<option selected=\"selected\" value=\""+data[i].id+"\" >"+data[i].roleName+"</option>";
                        }else{
                            options += "<option value=\""+data[i].id+"\" >"+data[i].roleName+"</option>";
                        }

                    }
                    userRole.html(options);
                }
            },
            error:function(data){//当访问时候，404，500 等非200的错误状态码
                validateTip(userRole.next(),{"color":"red"},getImgCross()+"(用户职位列表获取失败)",false);
            }
        });

        userName.on({
            focus:function () {
                setStyles(userName.next(), {'color':'red'}, "(名字要求1-5个字)", false);
                console.log("进入姓名填写");
            },
            blur:function () {
                var nameLength = userName.val().length;
                if (nameLength > 0 && nameLength < 6) {
                    setStyles(userName.next(), {'color':'#87CEED'}, getImgTick() + "(姓名符合)", true);
                    console.log("姓名正确:" + nameLength);
                } else{
                    setStyles(userName.next(), {'color':'red'}, getImgCross() + "(姓名不符合,请重新设置姓名)", false);
                    console.log("姓名错误:" + nameLength);
                }
            }
        });

        userBirthday.on({
            focus:function () {
                setStyles(userBirthday.next(), {'color':'red'}, "(请输入出生日期:格式xxxx-xx-xx)", false);
                console.log("进入输入日期");
            },
            blur:function () {
                var dateFormat =/^(\d{4})-(\d{2})-(\d{2})$/;
                var birthday = userBirthday.val();
                if(dateFormat.test(birthday)){
                    setStyles(userBirthday.next(), {'color':'#87CEED'}, getImgTick() + "(日期符合)", true);
                    console.log("日期验证正确");
                }else{
                    setStyles(userBirthday.next(), {'color':'red'}, getImgCross() + "(日期不符合,请重新输入)", false);
                    console.log("日期验证错误");
                }
            }
        });

        userPhone.on({
            focus:function () {
                setStyles(userPhone.next(), {'color':'red'}, "(请输入手机号码)", false);
                console.log("进入输入手机号码");
            },
            blur:function () {
                var phoneFormat = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
                var phone = userPhone.val();
                if (phoneFormat.test(phone)){
                    setStyles(userPhone.next(), {'color':'#87CEED'}, getImgTick() + "(号码符合)", true);
                    console.log("号码验证正确");
                }else{
                    setStyles(userPhone.next(), {'color':'red'}, getImgCross() + "(号码不符合,请重新输入)", false);
                    console.log("号码验证错误");
                }
            }
        });

        userAddress.on({
            focus:function (){
                setStyles(userAddress.next(), {'color':'red'}, "(请输入你的住址)", false);
                console.log("进入地址编辑")
            },
            blur:function () {
                setStyles(userAddress.next(), {'color':'#87CEED'}, getImgTick() + " OK", true);
                console.log("地址输入OK");
            }
        });

        updateUser.on({
            click:function (){
                console.log(userName.attr("validateStatus"));
                console.log(userBirthday.attr("validateStatus"));
                console.log(userPhone.attr("validateStatus"));
                console.log(userAddress.attr("validateStatus"));
                console.log(userRole.attr("validateStatus"));
                if(userName.attr("validateStatus") != "true"){
                    userName.blur();
                }else if(userBirthday.attr("validateStatus") != "true"){
                    userBirthday.blur();
                }else if(userPhone.attr("validateStatus") != "true"){
                    userPhone.blur();
                }else if(userAddress.attr("validateStatus") != "true"){
                    userAddress.blur();
                }else if(userRole.attr("validateStatus") != "true"){
                    userRole.blur();
                }else{
                    if(confirm("是否确认提交数据")){
                        updateUserForm.submit();
                    }
                }
            }
        });
    })
</script>